<template>
  <div>
    <van-nav-bar
      title="标题"
      left-text="返回"
      right-text="发布"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
    />
    <div>
      <van-field
        v-model="state.value"
        readonly
        clickable
        name="picker"
        label="话题"
        placeholder="请选择话题"
        @click="state.showPicker = true"
      />
      <van-popup v-model:show="state.showPicker" position="bottom">
        <van-picker
          :columns="columns"
          @confirm="onConfirm"
          @cancel="state.showPicker = false"
        />
      </van-popup>
    </div>
    <div class="input">
      <textarea
        v-model="state.text"
        style="width: 100%; height: 150px; border: 0; background-color: #ebeef5"
        placeholder="说说你今天的想法..."
      ></textarea>
      <van-uploader v-model="fileList" multiple :max-count="9" />
    </div>
    <div>
      <van-cell title="所在位置" icon="location-o"><van-icon name="arrow" /></van-cell>
      <van-cell title="提醒谁看" icon="like-o" ><van-icon name="arrow" /></van-cell>
      <van-cell title="谁可以看" icon="contact" ><van-icon name="arrow" /></van-cell>
    </div>
  </div>
</template>


<script>
import { Toast } from "vant";
import { reactive, ref } from "vue";
import { share } from "../api";
export default {
  setup() {
    const onClickLeft = () => {
      window.location.href = "http://localhost:3000/find";
    };
    const onClickRight = () => {
      Toast("发布成功");
      const time = Date.now();
    };
    
    //文件
    const fileList = ref([]);

    //动作面板
    const state = reactive({
      value: [],
      showPicker: false,
      time: "",
      userId: localStorage.getItem('userId'),
      text: "",
    });

    const columns = ["#杭州", "#宁波", "#温州", "#嘉兴", "#湖州"];

    const onConfirm = (value) => {
      console.log(value);
      state.value += value;
      console.log(state.value.indexOf(value));
      console.log(state.value);
      state.showPicker = false;
    };
    return {
      onClickLeft,
      onClickRight,
      state,
      columns,
      onConfirm,
      fileList
    };
  },
  components: {},
};
</script>

<style>
.input {
  padding: 10px;
  width: 100%;
  height: 50%;
  box-sizing: border-box;
  border-radius: 10px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  background-color: #ebeef5;
}
</style>